 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>省份城市的三级联动</title>
</head>
<body>
    <select id="province">
        <option value="-1">请选择</option>
    </select>
    <select id="city"></select>
    <select id="country"></select>
    <script>
        //省份数组

        var provinceArr = ['上海','江苏','河北'];
        //城市数组

        var cityArr = [
            ['上海市'],
            ['苏州市','南京市','扬州市'],
            ['石家庄','秦皇岛','张家口']
        ];
        //区域数组

        var countryArr = [
            [
                ['黄浦区','静安区','长宁区','浦东区']
            ], [
                ['虎丘区','吴中区','相城区','姑苏区','吴江区'],
                ['玄武区','秦淮区','建邺区','鼓楼区','浦口区'],
                ['邗江区','广陵区','江都区']
            ],[
                ['长安区','桥西区','新华区','井陉矿区'],
                ['海港区','山海关区','北戴河区','抚宁区'],
                ['桥东区','桥西区','宣化区','下花园区']
            ]
        ];
        function createOption(obj,data){
            for(var i in data){
                var op = new Option(data[i],i); //创建下拉菜单中的option
                obj.options.add(op);            //将选项添加到下拉菜单中
            }
        }
        var province = document.getElementById('province'); //获取省份元素对象
        createOption(province,provinceArr);
        var city = document.getElementById('city');  //获取城市下拉菜单的元素对象
        province.onchange = function(){    //为省份下拉列表添加事件
            city.options.length = 0;       //清空city下的所有原有的option
            createOption(city, cityArr[province.value]);
        };
        var country = document.getElementById('country'); //获取区域下拉菜单的元素对象
        city.onchange = function(){//为城市下拉列表添加事件
            country.options.length = 0;//清空country下的所有原有的option
            createOption(country, countryArr[province.value][city.value]);
        };
        province.onchange = function(){
           city.options.length = 0 ;
           createOption(city, cityArr[province.value]);
           if(province.value >= 0){
               city.onchange();
               
           }else{
               country.options.length = 0;

           }
       }
    </script>
</body>
</html>